<!-- 高德地图 -->
<template>
	<div>
		<div id="container">
			<div class="methods-box">
				<h4>坐标可选操作</h4>
				<button class="btn" style="margin-top: 1rem" @click="clear">清空坐标</button>
				<button class="btn" style="margin-top: 1rem" @click="save">确定坐标</button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader';
import { ref } from 'vue';

//------------------接收传入参数(组件)-------------------
const props = defineProps({
	// 坐标获取类型（true: 获取单坐标；false：获取区块坐标集）
	coordinateType: {
		type: Boolean,
		default: true,
	},
	// 多边形覆盖物坐标集(地域区块)
	polygonArr: {
		type: Array<Array<any>>,
		default: [[]],
	},
});

//------------------初始化------------------------------
onMounted(() => {
  nextTick(()=>{
    initMap(props.coordinateType, props.polygonArr);
  })
	
});

//------------------内部变量定义-------------------------
const emit = defineEmits(['getCoordinate']);
// 路径
const path = ref([]);
// 当前位置坐标
const current_position = ref([]);
// 坐标集
const coordinate = ref([]);
// 地图对象
const data = reactive({
	map: {},
});

//------------------定义调用方法-------------------------
watch(
  () => props.polygonArr,
  (newVal) => {
    if (newVal) {
		initMap(props.coordinateType, props.polygonArr);
	}
  }
)

const save = () => {
	if (coordinate.value.length == 0) {
		alert('未拾取任何坐标数据!');
		return;
	}
	emit('getCoordinate', coordinate.value);
};

// 清空坐标
const clear = () => {
	coordinate.value = [];
	data.map.clearMap();
};

// 地图初始化
const initMap = (hasOne: boolean, polygonArr: Array<any>) => {
	window._AMapSecurityConfig = {
		securityJsCode: '5a2f63e828dc36e3239ffa80ac66cc0d',
	};
	AMapLoader.load({
		key: '1e35117539e6b0e35fc219fe9d6c0644', // Web端开发者Key
		version: '2.0', // JSAPI版本
	}).then((AMap) => {
		const map = new AMap.Map('container', {
			viewMode: '3D', //是否为3D地图模式
			zoom: 13, //初始化地图级别
			center: [props.polygonArr[0][0],props.polygonArr[0][1]], //初始化地图中心点位置
		});

		data.map = map;

		// 添加地图插件
		AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.MapType', 'AMap.MouseTool'], function () {
			// 添加地图插件
			map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
			map.addControl(new AMap.Geolocation()); // 定位当前位置
			map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

			// 鼠标工具插件
			const mouseTool = new AMap.MouseTool(map);
			// mouseTool.rule();// 手动绘制折线图, 测量距离
			// mouseTool.measureArea(); // 测量面积
			if (!hasOne) {
				drawPolygon(mouseTool);

				// 展示多边形覆盖物
				showPolygon(map, polygonArr);
			} else {
				// 展示标点
				current_position.value = polygonArr[0] as never;
				addMarker();
			}
		});

		// 单击地图
		map.on('click', (e: any) => {
			//console.log('经度：', e.lnglat.lng, '纬度：', e.lnglat.lat);

			current_position.value = [e.lnglat.lng, e.lnglat.lat] as any;
			path.value.push([e.lnglat.lng, e.lnglat.lat] as never);
			coordinate.value.push([e.lnglat.lng, e.lnglat.lat] as never);

			if (hasOne) {
				addMarker();
			}
			//addPolyLine();
		});

		// 绘制多边形覆盖物
		function drawPolygon(mouseTool: any) {
			mouseTool.polygon({
				strokeColor: '#FF33FF',
				strokeWeight: 6,
				strokeOpacity: 0.2,
				fillColor: '#1791fc',
				fillOpacity: 0.4,
				strokeStyle: 'solid',
			});
		}

		// 展示多边形覆盖物
		function showPolygon(map: any, polygonArr: Array<any>) {
			new AMap.Polygon({
				map: map,
				path: polygonArr, //设置多边形边界路径
				strokeColor: '#FF33FF', //线颜色
				strokeOpacity: 0.2, //线透明度
				strokeWeight: 3, //线宽
				fillColor: '#1791fc', //填充色
				fillOpacity: 0.35, //填充透明度
			});
			map.setFitView();
		}

		// 添加标点
		function addMarker() {
			const marker = new AMap.Marker({
				// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
				position: current_position.value,
				// 偏移量
				offset: new AMap.Pixel(0, 0),
			});

			marker.setMap(map);
		}

		// 绘制折线
		function addPolyLine() {
			const polyline = new AMap.Polyline({
				path: path.value,
				isOutline: true,
				outlineColor: '#ffeeff',
				borderWeight: 1,
				strokeColor: '#3366FF',
				strokeOpacity: 0.6,
				strokeWeight: 5,
				strokeStyle: 'solid',
				lineJoin: 'round',
				lineCap: 'round',
				zIndex: 50,
			});
			map.add([polyline]);
		}
	});
};
</script>

<style scoped>
#container {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

.methods-box {
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border-radius: 0.25rem;
	width: 16rem;
	border-width: 0;
	border-radius: 0.4rem;
	box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
	position: absolute;
	top: 2rem;
	left: 2rem;
	z-index: 999;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 0.75rem 1.25rem;
}

.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	background-color: transparent;
	background-image: none;
	color: #25a5f7;
	border-color: #25a5f7;
	padding: 0.25rem 0.5rem;
	line-height: 1.5;
	border-radius: 1rem;
	cursor: pointer;
}

.btn:hover {
	color: #fff;
	background-color: #25a5f7;
	border-color: #25a5f7;
}
</style>
